<template>
	<div class="section-6">
		<div class="container">
			<div class="headTitle">
					<div class="inner">
							<h6>product</h6>
							<h1>科研产品</h1>
					</div>
			</div>
			<div class="flex-grow" v-if="!isWap">
				<div class="flex-item item-1"  @mouseenter="showActive(1)" @mouseleave="showActive(0)" v-show="active == 0 || active == 1" >
					<div class="shadow">
						<div class="title">仿生动物</div>
						<div class="subtitle animated" v-show="active === 1" :class="{'moveToUp': active === 1}">
							<p>做一只动物</p>
							<p>蠢萌可爱</p>
						</div>
						<div class="item animated" v-show="active === 1" :class="{'moveToUp2': active === 1}">
							<div><img src="./images/icon/fang.png">高仿真度</div>
							<div><img src="./images/icon/shijue.png">视觉SLAN能力</div>
							<div><img src="./images/icon/jiaohu.png">自主决策交互能力</div>
						</div>
						<div class="img animal animated">
							<img src="./images/bionic-animal.png">
						</div>
					</div>
				</div>
				<div class="flex-item item-2" @mouseenter="showActive(2)" @mouseleave="showActive(0)" v-show="active == 0 || active == 2">
					<div class="shadow">
						<div class="title">Super Servant</div>
						<div class="subtitle animated" v-show="active === 2" :class="{'moveToUp': active === 2}">
							<p>我的手千里探物</p>
							<p>我的腿行云流水</p>
						</div>
						<div class="item animated" v-show="active === 2" :class="{'moveToUp2': active === 2}">
							<div><img src="./images/icon/zu.png">多足结构，适应全地形</div>
							<div><img src="./images/icon/jixieshou.png">拟人生物特征机械手臂</div>
							<div><img src="./images/icon/zoulu.png">行走速度与人相当</div>
							<div><img src="./images/icon/zhongliangKG.png">承载10KG力度</div>
						</div>
						<div class="img hand animated">
							<img src="./images/robot-hand.png">
						</div>
					</div>
				</div>
				<div class="flex-item item-3" @mouseenter="showActive(3)" @mouseleave="showActive(0)" v-show="active == 0 || active == 3" >
					<div class="shadow">
						<div class="title">仿生人</div>
						<div class="subtitle animated" v-show="active === 3" :class="{'moveToUp': active === 3}">
							<p>好看的皮囊千篇一律</p>
							<p>我的情绪万里挑一</p>
						</div>
						<div class="item animated" v-show="active === 3" :class="{'moveToUp2': active === 3}">
							<div><img src="./images/icon/zhen.png">外观的高度仿真性</div>
							<div><img src="./images/icon/zhongliang.png">机体重量不超过20公斤</div>
							<div><img src="./images/icon/biaoqing.png">自主表情系统</div>
							<div><img src="./images/icon/dongzuo.png">自主动作规划系统</div>
							<div><img src="./images/icon/yuyi.png">自然语义交互能力</div>
						</div>
						<div class="img man animated">
							<img src="./images/bionic-man.png">
						</div>
					</div>
				</div>
			</div>
			<div class="flex-grow" else>
					<div class="flex-item">
							<div class="shadow">
									<div class="title">仿生动物</div>
									<div class="img animal">
											<img src="./images/bionic-animal.png">
									</div>
									<div class="subtitle">
											<p>做一只动物</p>
											<p>蠢萌可爱</p>
									</div>
									<div class="item">
											<div><img src="./images/icon/fang.png">高仿真度</div>
											<div><img src="./images/icon/shijue.png">视觉SLAN能力</div>
											<div><img src="./images/icon/jiaohu.png">自主决策交互能力</div>
									</div>
							</div>
					</div>
					<div class="flex-item">
							<div class="shadow">
									<div class="title">Super Servant</div>
									<div class="img hand">
											<img src="./images/robot-hand.png">
									</div>
									<div class="subtitle">
											<p>我的手千里探物</p>
											<p>我的腿行云流水</p>
									</div>
									<div class="item">
											<div><img src="./images/icon/zu.png">多足结构，适应全地形</div>
											<div><img src="./images/icon/jixieshou.png">拟人生物特征机械手臂</div>
											<div><img src="./images/icon/zoulu.png">行走速度与人相当</div>
											<div><img src="./images/icon/zhongliangKG.png">承载10KG力度</div>
									</div>
							</div>
					</div>
					<div class="flex-item">
							<div class="shadow" >
									<div class="title">仿生人</div>
									<div class="img man">
											<img src="./images/bionic-man.png">
									</div>
									<div class="subtitle">
											<p>好看的皮囊千篇一律</p>
											<p>我的情绪万里挑一</p>
									</div>
									<div class="item">
											<div><img src="./images/icon/zhen.png">外观的高度仿真性</div>
											<div><img src="./images/icon/zhongliang.png">机体重量不超过20公斤</div>
											<div><img src="./images/icon/biaoqing.png">自主表情系统</div>
											<div><img src="./images/icon/dongzuo.png">自主动作规划系统</div>
											<div><img src="./images/icon/yuyi.png">自然语义交互能力</div>
									</div>
							</div>
					</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data(){
		return{
			active: 0,
			isWap: false
		}
	},
	mounted() {
		if($(window).width()<768){
			this.isWap = true;
		}
	},
	methods:{
		showActive(index) {
			this.active = index;
		}
	}
}
</script>

<style lang="less" scoped>
.section-6{
	overflow: hidden;
	width: 100%;
	height: 750px;
	background: url(./images/section-6.png) no-repeat center center;
	background-size: cover;
	.flex-grow{
		height:570px;
		.flex-item{
			transition: all 3s linear;
			margin-top:70px;
			display: block;
			.shadow{
				cursor: pointer;
				color:#FFFFFF;
				opacity:0.3;
				// overflow: hidden;
				height:100%;
				position: relative;
				transition: all .5s linear;
				.title{
					font-size: 30px;
					width:250px;
					height:50px;
					line-height: 50px;
					text-align: center;
					border:1px solid rgba(255,255,255,1);
					border-radius:25px;
					margin:auto;
				}
				.subtitle{
					font-size:20px;
					line-height:40px;
					position: absolute;
					transform: translate3d(160px,500px,0);
					animation-delay: 0.2s;
					transition: all .2s linear;
				}
				.item{
					color:#ccc;
					font-size:16px;
					line-height:40px;
					position: absolute;
					transform: translate3d(160px,500px,0);
					animation-delay: 0.4s;
					transition: all .4s linear;
					img{
						display: inline-block;
						width:30px;
						height:30px;
						vertical-align: middle;
						margin-right:20px;
					}
				}
				.img{
					height:450px;
					margin-top:30px;
					position: relative;
					animation-delay: 0.2s;
					transition: all .5s linear;
					img{
						margin:auto;
						width:350px;
						position: absolute;
						bottom:50px;
						left:0;
					}
					&.man{
						margin:auto;
						img{
							bottom:0px;
							margin-left:100px !important;
							width:160px;
						}
					}
				}
				
			}
			&:hover{
				.shadow{
					opacity:1;
					.title{
						width:400px;
						margin: inherit;
						font-size:40px;
						margin-left:135px;
						text-align: left;
						border:1px solid transparent;
					}
					.img{
						img{
							width:500px;
							margin-left:100px;
						}
						&.man{
							img{
								width:230px;
							}
						}
					}
				}
				
			}
			&.item-1{
				.shadow{
					.img{
						transform: translate3d(0,0,0);
					}
				}
				&:hover{
					.shadow{
						.img{
							transform: translate3d(600px,0,0);
						}
					}
				}
			}
			&.item-2{
				.shadow{
					.img{
						transform: translate3d(300px,0,0);
						img{
							left: -300px
						}
					}
				}
				&:hover{
					.shadow{
						.img{
							transform: translate3d(600px,0,0);
							img{
								left: 0px;
							}
						}
					}
				}
			}
			&.item-3{
				.shadow{
					.img{
						transform: translate3d(800px,0,0);
						img{
							left: -800px
						}
					}
				}
				&:hover{
					.shadow{
						.img{
							transform: translate3d(800px,0,0);
							img{
								left: 0px;
							}
						}
					}
				}
			}
		}
	}
}

// .show-enter-active{
// 	animation: bounce-in .5s;
// }
// .show-leave-active{
// 	animation: bounce-in .5s reverse;
// }

// @keyframes bounce-in {
//   0% {
//     transform: scale(0);
//   }
//   50% {
//     transform: scale(1.5);
//   }
//   100% {
//     transform: scale(1);
//   }
// }

// .show-enter,.show-leave-to{
// 	display: none;
// }
// .show-enter-to,.show-leave{
// 	display: block;
// }


// .moveToRight1{
//   animation-name: moveToRight;
// }
// @keyframes moveToRight1 {
// 	0% {
// 		-webkit-transform: translate3d(0,0,0);
// 		transform: translate3d(0,0,0)
// 	}
// 	to {
// 		-webkit-transform: translate3d(600px,0,0);
// 		transform: translate3d(600px,0,0)
// 	}
// }
// .moveToRight2{
//   animation-name: moveToRight2;
// }
// @keyframes moveToRight2 {
// 	0% {
// 		-webkit-transform: translate3d(300px,0,0);
// 		transform: translate3d(300px,0,0)
// 	}
// 	to {
// 		-webkit-transform: translate3d(600px,0,0);
// 		transform: translate3d(600px,0,0)
// 	}
// }
// .moveToRight3{
//   animation-name: moveToRight3;
// }
// @keyframes moveToRight3 {
// 	0% {
// 		-webkit-transform: translate3d(770px,0,0);
// 		transform: translate3d(770px,0,0)
// 	}
// 	to {
// 		-webkit-transform: translate3d(770px,0,0);
// 		transform: translate3d(770px,0,0)
// 	}
// }
.moveToUp{
  animation-name: moveToUp;
}
@keyframes moveToUp {
	0% {
		-webkit-transform: translate3d(140px,500px,0);
		transform: translate3d(140px,500px,0);
	}
	to {
		-webkit-transform: translate3d(140px,20px,0);
		transform: translate3d(140px,20px,0);
	}
}
.moveToUp2{
  animation-name: moveToUp2;
}
@keyframes moveToUp2 {
	0% {
		-webkit-transform: translate3d(140px,500px,0);
		transform: translate3d(140px,500px,0)
	}
	to {
		-webkit-transform: translate3d(140px,150px,0);
		transform: translate3d(140px,150px,0)
	}
}
</style>